<template>
  <van-tabbar v-model="active">
    <van-tabbar-item name="film" icon="home-o" to="/first">
      <template #icon>
        <span class="iconfont icon-shouye"></span>
      </template>
      首页
    </van-tabbar-item>
    <van-tabbar-item name="cinema" icon="search" to="/foster">
      <template #icon>
        <span class="iconfont icon-uniFB"></span>
      </template>
      寄养
    </van-tabbar-item>
    <van-tabbar-item name="random" icon="friends-o" to="/shop">
      <template #icon>
        <span class="iconfont icon-gouwuche"></span>
      </template>
      购物车
    </van-tabbar-item>
    <van-tabbar-item name="my" icon="setting-o" to="/my">
      <template #icon>
        <span class="iconfont icon-my"></span>
      </template>
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>

<style lang="scss" >

.iconfont {
  font-size: 21px;
}
.van-tabbar-item {
  color: #000;
}
.van-tabbar-item--active {
  color: #FC4C34;
}
.van-tabbar {
  border-top: 1px #7b7d81 solid;
}
</style>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute()
const active = ref(route.path.slice(1) || "first")

</script>
